<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #root {
        background-color: green;
    }

    .test {
        line-height: 90px;
    }
</style>

<body>
    <div id="root" style="color: red; font-size: 18px;" class="test">
        <span> hello world {{name}} maybe Love {{obj}}</span>
        <div id="test">{{age}}</div>
        <div>{{arr}}</div>
        <div>{{fullname}}</div>
    </div>

    <script src="/dist/umd/vue.js"></script>
    <script>
        // 测试混入
        Vue.mixin({
            mounted() {
                console.log('父元素的挂载 ', this.age);
            }
        })

        let app = new Vue({
            el: '#root',
            data: {
                name: 'pudding',
                age: 23,
                obj: {
                    girl: 'ball'
                },
                arr: [1, 2, 3]
            },
            watch: {
                age(newVal, old) {
                    console.log(newVal, old, '自定义的watch，函数');
                },
                'obj.girl': {
                    handler() {
                        console.log('哈哈哈', '自定义的watch，字符串');
                    },
                    immediate: true
                }
            },
            computed: {
                fullname() {
                    console.log('测试计算属性');
                    return this.name
                }
            },
            beforeCreate() {
                console.log('创建前', this.name);
            },
            created() {
                console.log('创建后 ', this.name);
            },
            beforeMount() {
                console.log('挂载前 ', this.name);
            },
            mounted() {
                console.log('挂载后 ', this.name);
            },
            updated() {
                console.log('更新后', this.name);
            },
        })

        // 测试 nextTick
        app.$nextTick(() => {
            app.name = '更新的名字'
            console.log('自定义的nextTick', app.name);
        })

        app.age = 333
        app.obj.girl = 'har'


        // 测试 计算属性
        console.log(app.fullname, '测试开始------');
        console.log(app.fullname, '------');
        console.log(app.fullname, '------');
        setTimeout(() => {
            app.name = 'harley'
        }, 2000)
        console.log(app.fullname, '------');
        console.log(app.fullname, '------');
        console.log(app.fullname, '测试结束------');

    </script>

    <!-- <script>

        setTimeout(() => {
            const test = document.getElementById('test')
            test.innerHTML = '哈哈哈哈'
        }, 6000)
    </script>


    <script>
        setTimeout(() => {
            document.body.innerHTML = `
        <span> 你好啊 </span>

        `
        }, 9000)
    </script> -->
</body>

</html>